<template>
  <a-form ref="form" :model="formData" :rules="rules" layout="vertical">
    <div class="form__box">
      <!-- <a-form-item :label="`数据绑定key`" :field="`dataIndex`" >
        <a-input v-model="formData.dataIndex" :disabled="formData.notMod"></a-input>
        <field-linkage :formData="formData"></field-linkage>
      </a-form-item> -->
      <!-- <a-form-item :label="`字段名称`" :field="`name`">
        <a-input v-model="formData.name"></a-input>
      </a-form-item> -->
      <a-form-item :label="`文案内容`" field="defaultValue">
        <a-input
          :disabled="formData.dividerType === 'vertical'"
          v-model="formData.defaultValue"
        ></a-input>
      </a-form-item>
      <a-form-item :label="`文案位置`" field="orientation">
        <a-radio-group v-model="formData.orientation" type="button">
          <a-radio value="left"> 左边 </a-radio>
          <a-radio value="center"> 中间 </a-radio>
          <a-radio value="right"> 右边 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="`类型`" field="dividerType">
        <a-radio-group
          v-model="formData.dividerType"
          @change="dividerTypeChange"
          type="button"
        >
          <a-radio value="horizontal"> 横向 </a-radio>
          <a-radio value="vertical"> 纵向 </a-radio>
          <!-- <a-radio-button value="">
            占位符
          </a-radio-button> -->
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="`上边距`" field="topMargin">
        <a-input-number v-model="formData.topMargin"></a-input-number>
      </a-form-item>
      <a-form-item :label="`下边距`" field="bottomMargin">
        <a-input-number v-model="formData.bottomMargin"></a-input-number>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="defaultValue">
        <a-input-number
          :step="1"
          :max="24"
          :min="6"
          v-model="formData.wrapperCol"
        ></a-input-number>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { basicDefaultData, dataTypeOptions } from "./../base/options";
import FieldLinkage from "@/components/Form/base/fieldLinkage.vue";
export const defaultData = () => ({
  ...basicDefaultData(),
  type: "divider",
  name: "",
  defaultValue: "",
  wrapperCol: 24,
  dividerType: "horizontal",
  orientation: "left",
  topMargin: 20,
  bottomMargin: 20,
});
export default {
  name: "DividerInfo",
  components: { FieldLinkage },
  inject: ["dataObj"],
  data() {
    return {
      rules: {
        dataIndex: [{ required: true, message: "必填" }],
      },
      dataTypeOptions,
    };
  },
  computed: {
    formData() {
      return this.dataObj.pageData[this.dataObj.selectIndex]?.formData || {};
    },
  },
  watch: {
    formData: {
      immediate: true,
      handler(newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData =
            defaultData();
          console.log(
            "input",
            this.dataObj.pageData[this.dataObj.selectIndex].formData
          );
        }
      },
    },
  },
  methods: {
    dividerTypeChange(e) {
      if (e.target.value === "vertical") {
        this.formData.defaultValue = "";
      }
    },
  },
};
</script>

<style scoped lang="less"></style>
